<template>  
  <div class="container">  
    <el-form :model="tData.loginForm" class="tel-regist-page pc-style" ref="registerForm" >  
      <div class="regist-title">  
        <span>注册新账号</span>  
      </div>  
  
      <el-form-item label="账号" prop="account">  
        <el-input v-model="tData.loginForm.account" placeholder="请输入账号"></el-input>  
      </el-form-item>  
      <el-form-item label="昵称" prop="account">  
        <el-input v-model="tData.loginForm.nickName" placeholder="请输入昵称"></el-input>  
      </el-form-item>  
      <el-form-item label="手机号码" prop="phone">  
        <el-input v-model="tData.loginForm.mobile" placeholder="请输入手机号码"></el-input>  
      </el-form-item>  
      <el-form-item label="邮箱" prop="account">  
        <el-input v-model="tData.loginForm.email" placeholder="请输入邮箱"></el-input>  
      </el-form-item>  
  
      <el-form-item label="密码" prop="password">  
        <el-input type="password" v-model="tData.loginForm.password" placeholder="请输入密码"></el-input>  
      </el-form-item>  
  
      <el-form-item label="确认密码" prop="repassword">  
        <el-input type="password" v-model="tData.loginForm.repassword" placeholder="请再次输入密码"></el-input>  
      </el-form-item>  
  
      <el-form-item>  
        <el-button type="primary" @click="handleRegister">注册</el-button>  
      </el-form-item>  
    </el-form>  
  </div>  
</template>  
  
<script setup>  
import { useRouter } from 'vue-router';  
import { reactive, ref } from 'vue';  
// import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';  
import { register } from '@/api/register.js';  
import { ElMessage } from 'element-plus';  
  
const router = useRouter();  
  
const tData = reactive({  
  loginForm: {  
    account: '',  
    password: '',  
    nickName: '',  
    mobile: '',  
    email: '',  
    repassword: '',
    channel:'CLIENT'
  }  
});  
  
const handleRegister = () => {  
  if (!tData.loginForm.account || !tData.loginForm.password || !tData.loginForm.repassword) {  
    ElMessage.warn('不能为空！');  
    return;  
  }  
  
  if (tData.loginForm.password !== tData.loginForm.repassword) {  
    ElMessage.warn('两次输入的密码不一致！');  
    return;  
  }  
  
  register(tData.loginForm).then(res => {  
    ElMessage.success('注册成功！');  
    router.push({ path: '/home' });  
  }).catch(err => {  
    ElMessage.error(err.message || '注册失败');  
  });  
};  
</script>  
  
<style scoped lang="scss">  
.container {  
  max-width: 100%;  
  background-image: url('@/assets/images/regieser-bg.jpg');  
  background-size: cover;  
  height: 100vh;  
  overflow: hidden;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}  
  
.pc-style {  
  width: 400px;  
  padding: 40px;  
  background: #fff;  
  box-shadow: 2px 2px 6px #aaa;  
  border-radius: 4px;  
}  
  
.regist-title {  
  font-size: 14px;  
  color: #1e1e1e;  
  font-weight: 500;  
  margin-bottom: 20px;  
  
  .toWxLogin {  
    float: right;  
    color: #3d5b96;  
    cursor: pointer;  
  }  
}  
  
.el-form-item {  
  margin-bottom: 16px;  
}  
  
.el-input {  
  font-size: 14px;  
  color: #1e1e1e;  
  font-weight: 500;  
  letter-spacing: 1.5px;  
}  
  
.el-button--primary {  
  background-color: #3d5b96;  
  border-color: #3d5b96;  
}  
</style>